<template>
  <div class="about-page">
    <el-card class="about-card">
      <div class="about-header">
        <div class="logo-section">
          <div class="logo">
            <el-icon size="60" color="#409eff">
              <Box />
            </el-icon>
          </div>
          <h1>资产管理系统</h1>
          <p class="version">Version {{ systemInfo.version }}</p>
        </div>
      </div>
      
      <el-divider />
      
      <div class="about-content">
        <el-row :gutter="20">
          <el-col :span="12">
            <h3>系统信息</h3>
            <el-descriptions :column="1" border>
              <el-descriptions-item label="系统名称">
                {{ systemInfo.name }}
              </el-descriptions-item>
              <el-descriptions-item label="系统版本">
                {{ systemInfo.version }}
              </el-descriptions-item>
              <el-descriptions-item label="构建时间">
                {{ systemInfo.buildTime }}
              </el-descriptions-item>
              <el-descriptions-item label="运行环境">
                {{ systemInfo.environment }}
              </el-descriptions-item>
              <el-descriptions-item label="数据库版本">
                {{ systemInfo.database }}
              </el-descriptions-item>
              <el-descriptions-item label="服务器地址">
                {{ systemInfo.server }}
              </el-descriptions-item>
            </el-descriptions>
          </el-col>
          
          <el-col :span="12">
            <h3>技术栈</h3>
            <div class="tech-stack">
              <div class="tech-item" v-for="tech in techStack" :key="tech.name">
                <div class="tech-icon">
                  <el-icon size="24" :color="tech.color">
                    <component :is="tech.icon" />
                  </el-icon>
                </div>
                <div class="tech-info">
                  <div class="tech-name">{{ tech.name }}</div>
                  <div class="tech-version">{{ tech.version }}</div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
        
        <el-divider />
        
        <div class="features-section">
          <h3>主要功能</h3>
          <el-row :gutter="20">
            <el-col :span="8" v-for="feature in features" :key="feature.name">
              <el-card class="feature-card" shadow="hover">
                <div class="feature-icon">
                  <el-icon size="32" :color="feature.color">
                    <component :is="feature.icon" />
                  </el-icon>
                </div>
                <h4>{{ feature.name }}</h4>
                <p>{{ feature.description }}</p>
              </el-card>
            </el-col>
          </el-row>
        </div>
        
        <el-divider />
        
        <div class="team-section">
          <h3>开发团队</h3>
          <el-row :gutter="20">
            <el-col :span="6" v-for="member in teamMembers" :key="member.name">
              <el-card class="member-card" shadow="hover">
                <div class="member-avatar">
                  <el-avatar :size="60" :src="member.avatar">
                    {{ member.name.charAt(0) }}
                  </el-avatar>
                </div>
                <h4>{{ member.name }}</h4>
                <p class="member-role">{{ member.role }}</p>
                <p class="member-email">{{ member.email }}</p>
              </el-card>
            </el-col>
          </el-row>
        </div>
        
        <el-divider />
        
        <div class="contact-section">
          <h3>联系我们</h3>
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="contact-item">
                <el-icon size="24" color="#409eff">
                  <Message />
                </el-icon>
                <div class="contact-info">
                  <h4>技术支持</h4>
                  <p>support@assetmanagement.com</p>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="contact-item">
                <el-icon size="24" color="#67c23a">
                  <Phone />
                </el-icon>
                <div class="contact-info">
                  <h4>联系电话</h4>
                  <p>400-123-4567</p>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="contact-item">
                <el-icon size="24" color="#e6a23c">
                  <Location />
                </el-icon>
                <div class="contact-info">
                  <h4>公司地址</h4>
                  <p>江苏省苏州市工业园区</p>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        
        <el-divider />
        
        <div class="license-section">
          <h3>版权信息</h3>
          <p class="license-text">
            本软件由苏州城市大学开发，版权所有 © 2024 苏州城市大学。保留所有权利。
          </p>
          <p class="license-text">
            本软件仅供学习和研究使用，不得用于商业用途。如有商业需求，请联系我们。
          </p>
        </div>
      </div>
      
      <div class="about-footer">
        <el-button type="primary" @click="checkUpdate">检查更新</el-button>
        <el-button @click="exportSystemInfo">导出系统信息</el-button>
        <el-button @click="showChangelog">更新日志</el-button>
      </div>
    </el-card>
    
    <!-- 更新日志对话框 -->
    <el-dialog
      v-model="changelogVisible"
      title="更新日志"
      width="800px"
    >
      <div class="changelog-content">
        <div v-for="version in changelog" :key="version.version" class="version-item">
          <h4>v{{ version.version }} - {{ version.date }}</h4>
          <div class="version-changes">
            <div v-for="change in version.changes" :key="change.type" class="change-section">
              <h5>{{ getChangeTypeLabel(change.type) }}</h5>
              <ul>
                <li v-for="item in change.items" :key="item">{{ item }}</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { 
  Box, 
  Message, 
  Phone, 
  Location,
  Tools,
  User,
  DataAnalysis,
  Setting,
  Document
} from '@element-plus/icons-vue'

const changelogVisible = ref(false)

// 系统信息
const systemInfo = ref({
  name: '资产管理系统',
  version: '1.0.0',
  buildTime: '2024-01-15 14:30:00',
  environment: 'Production',
  database: 'MySQL 8.0',
  server: 'http://localhost:8080'
})

// 技术栈
const techStack = ref([
  {
    name: 'Vue.js',
    version: '3.3.0',
    icon: 'Box',
    color: '#42b883'
  },
  {
    name: 'Element Plus',
    version: '2.4.0',
    icon: 'Box',
    color: '#409eff'
  },
  {
    name: 'Spring Boot',
    version: '3.1.0',
    icon: 'Box',
    color: '#6db33f'
  },
  {
    name: 'MyBatis Plus',
    version: '3.5.0',
    icon: 'Box',
    color: '#ff6b35'
  },
  {
    name: 'MySQL',
    version: '8.0',
    icon: 'Box',
    color: '#00758f'
  },
  {
    name: 'Vite',
    version: '4.4.0',
    icon: 'Box',
    color: '#646cff'
  }
])

// 主要功能
const features = ref([
  {
    name: '资产管理',
    description: '支持资产的录入、编辑、查询、删除等基本操作，提供完整的资产生命周期管理。',
    icon: 'Box',
    color: '#409eff'
  },
  {
    name: '分类管理',
    description: '提供灵活的资产分类体系，支持树形结构，便于资产的分类管理。',
    icon: 'Box',
    color: '#67c23a'
  },
  {
    name: '维护管理',
    description: '记录资产的维护历史，制定维护计划，提高资产使用效率。',
    icon: 'Tools',
    color: '#e6a23c'
  },
  {
    name: '用户管理',
    description: '完善的用户权限管理体系，支持角色分配和权限控制。',
    icon: 'User',
    color: '#f56c6c'
  },
  {
    name: '报表统计',
    description: '生成各类统计报表，支持数据导出，为决策提供数据支持。',
    icon: 'DataAnalysis',
    color: '#909399'
  },
  {
    name: '系统设置',
    description: '丰富的系统配置选项，包括数据备份、日志管理等功能。',
    icon: 'Setting',
    color: '#9c27b0'
  }
])

// 开发团队
const teamMembers = ref([
  {
    name: '封昊',
    role: '仪表盘与资产管理模块',
    email: '',
    avatar: ''
  },
  {
    name: '李毓祺',
    role: '分类管理模块',
    email: '',
    avatar: ''
  },
  {
    name: '仲开宇',
    role: '维护管理模块',
    email: '',
    avatar: ''
  },
  {
    name: '施辰',
    role: '用户管理模块',
    email: '',
    avatar: ''
  },
  {
    name: '束冰青',
    role: '系统设置模块',
    email: '',
    avatar: ''
  }
])

// 更新日志
const changelog = ref([
  {
    version: '1.0.0',
    date: '2024-01-15',
    changes: [
      {
        type: 'feature',
        items: [
          '完成资产管理基础功能',
          '实现用户权限管理',
          '添加数据导入导出功能',
          '集成图表统计功能'
        ]
      },
      {
        type: 'improvement',
        items: [
          '优化用户界面体验',
          '提升系统响应速度',
          '完善错误处理机制'
        ]
      },
      {
        type: 'fix',
        items: [
          '修复数据分页显示问题',
          '解决文件上传异常',
          '修复权限验证bug'
        ]
      }
    ]
  },
  {
    version: '0.9.0',
    date: '2024-01-10',
    changes: [
      {
        type: 'feature',
        items: [
          '实现基础CRUD功能',
          '添加用户登录功能',
          '完成数据库设计'
        ]
      }
    ]
  }
])

// 方法
const checkUpdate = () => {
  ElMessage.success('当前已是最新版本')
}

const exportSystemInfo = () => {
  const info = {
    systemInfo: systemInfo.value,
    techStack: techStack.value,
    features: features.value,
    teamMembers: teamMembers.value
  }
  
  const blob = new Blob([JSON.stringify(info, null, 2)], { type: 'application/json' })
  const url = URL.createObjectURL(blob)
  const link = document.createElement('a')
  link.href = url
  link.download = '系统信息.json'
  link.click()
  URL.revokeObjectURL(url)
  
  ElMessage.success('系统信息导出成功')
}

const showChangelog = () => {
  changelogVisible.value = true
}

const getChangeTypeLabel = (type: string) => {
  const typeMap: Record<string, string> = {
    'feature': '新功能',
    'improvement': '改进',
    'fix': '修复',
    'breaking': '破坏性变更'
  }
  return typeMap[type] || type
}
</script>

<style scoped>
.about-page {
  padding: 20px;
}

.about-card {
  max-width: 1200px;
  margin: 0 auto;
}

.about-header {
  text-align: center;
  padding: 40px 0;
}

.logo-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.logo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.logo-section h1 {
  margin: 0;
  color: #303133;
  font-size: 32px;
  font-weight: bold;
}

.version {
  color: #909399;
  font-size: 16px;
  margin: 0;
}

.about-content {
  padding: 20px 0;
}

.about-content h3 {
  color: #303133;
  margin-bottom: 20px;
  font-size: 20px;
}

.tech-stack {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.tech-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  transition: all 0.3s;
}

.tech-item:hover {
  border-color: #409eff;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
}

.tech-info {
  flex: 1;
}

.tech-name {
  font-weight: bold;
  color: #303133;
  margin-bottom: 4px;
}

.tech-version {
  color: #909399;
  font-size: 14px;
}

.features-section {
  margin: 40px 0;
}

.feature-card {
  text-align: center;
  padding: 30px 20px;
  height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.feature-icon {
  margin-bottom: 15px;
}

.feature-card h4 {
  margin: 0 0 10px 0;
  color: #303133;
}

.feature-card p {
  color: #606266;
  line-height: 1.6;
  margin: 0;
}

.team-section {
  margin: 40px 0;
}

.member-card {
  text-align: center;
  padding: 30px 20px;
}

.member-avatar {
  margin-bottom: 15px;
}

.member-card h4 {
  margin: 0 0 8px 0;
  color: #303133;
}

.member-role {
  color: #409eff;
  font-weight: bold;
  margin: 0 0 8px 0;
}

.member-email {
  color: #909399;
  font-size: 14px;
  margin: 0;
}

.contact-section {
  margin: 40px 0;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 8px;
}

.contact-info h4 {
  margin: 0 0 8px 0;
  color: #303133;
}

.contact-info p {
  margin: 0;
  color: #606266;
}

.license-section {
  text-align: center;
  margin: 40px 0;
}

.license-text {
  color: #606266;
  line-height: 1.8;
  margin: 10px 0;
}

.about-footer {
  text-align: center;
  padding: 30px 0;
  border-top: 1px solid #ebeef5;
}

.changelog-content {
  max-height: 500px;
  overflow-y: auto;
}

.version-item {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #ebeef5;
}

.version-item:last-child {
  border-bottom: none;
}

.version-item h4 {
  color: #303133;
  margin: 0 0 15px 0;
}

.change-section {
  margin-bottom: 15px;
}

.change-section h5 {
  color: #409eff;
  margin: 0 0 8px 0;
  font-size: 14px;
}

.change-section ul {
  margin: 0;
  padding-left: 20px;
}

.change-section li {
  color: #606266;
  margin: 4px 0;
  font-size: 14px;
}

@media (max-width: 768px) {
  .about-page {
    padding: 10px;
  }
  
  .tech-stack {
    grid-template-columns: 1fr;
  }
  
  .feature-card {
    height: auto;
    margin-bottom: 20px;
  }
  
  .member-card {
    margin-bottom: 20px;
  }
  
  .contact-item {
    margin-bottom: 15px;
  }
}
</style> 